<!--
  Author: 善良的YWJ
  Created by shanliangdeYWJ on 2020/09/09
  File: 05.3解决异步设置值每个组件都是独立的.html
  Description: "
  
   请输入文件描述内容
  
               " 
  Github: https://github.com/shanliangdeYWJ
-->
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1" />
  <meta name="keywords" content="" />
  <meta name="description" content="" />
  <title>09.select标签</title>
</head>

<body>
  <div id="root"></div>

  <!-- 加载 React。-->
  <script src="../js/react@16.development.js"></script>
  <script src="../js/react-dom@16.development.js"></script>
  <script src="../js/babel@6.min.js"></script>

  <!-- 加载我们的 React 组件。-->
  <script type="text/babel">

    // 在 React 里，HTML 表单元素的工作方式和其他的 DOM 元素有些不同
    // 因为表单元素通常会保持一些内部的 state。

    // 受控组件
    // 渲染表单的 React 组件还用 state 控制着用户输入过程中表单发生的操作

    class FlavorForm extends React.Component {
      constructor(props) {
        super(props);
        this.state = { value: 'coconut' }

        this.handleChange = this.handleChange.bind(this);
        this.handleSubmit = this.handleSubmit.bind(this);
      }

      handleChange(event) {
        this.setState({ value: event.target.value });
      }
      handleSubmit(event) {
        console.log('你喜欢的风味是' + this.state.value);
        event.preventDefault();
      }
      render() {
        return (
          <form onSubmit={this.handleSubmit}>
            <label>选择你喜欢的风味：
              <select value={this.state.value} onChange={this.handleChange}>
                <option value="grapeFruit">葡萄汁</option>
                <option value="lime">酸橙</option>
                <option value="coconut">椰子</option>
                <option value="mango">芒果</option>
              </select>
            </label>
            <input type="submit" value="提交" />
          </form>
        )
      }

    }

    ReactDOM.render(
      <FlavorForm />,
      document.getElementById('root')
    );


  </script>
</body>

</html>